/*
  学习目标：生命周期-挂载阶段
  钩子函数:
  使用场景:
  步骤：
     1. 👎 constructor: 创建
     2. render: 渲染
     3. componentDidMount :  挂载后
*/

import React, { Component } from 'react';

export default class App extends Component {
  // 类似vue中的created， 创建后
  // 场景：👎早期， 声明state 和 ref
  constructor() {
    super();
    console.log('constructor执行了  ----->  ');
    this.state = {
      count: 99,
    };
  }

  // 👍
  // state = {
  //   count: 99,
  // };

  render() {
    console.log('render执行了  ----->  ');
    return <div> {this.state.count}</div>;
  }

  // 类似： vue中mounted
  // 场景： 💥💥 发请求， 2. 最新获取dom元素
  componentDidMount() {
    console.log('componentDidMount 执行了----->  ');
  }
}
